<script>
    var valid_result = false
    {notempty name="row"}
    var row = {:json_encode($row, 256)};
    {else/}
    var row = {};
    {/notempty}

    var app = new Vue({
        el: '#app',
        data: {
            title: '',
            kind: 'SINGLE',
            fillOptions: [],
            showTitleEditor: true,
            showTitleFill: true,
        },
        created() {
            if (row) {
                this.title = row.title
                this.kind = row.kind

                if (row.kind === 'FILL') {
                    console.log('row.answer', row.answer, JSON.parse(row.answer))
                    this.fillOptions = JSON.parse(row.answer)
                    console.log('fillOptions', this.fillOptions)
                }

                this.hideTitle(row.kind)
            } else {
              // $('#c-title2').hide()
              this.showTitleFill = false
            }
        },
        methods: {
            // 修改题型
            changeKind(e) {
                console.log('changeKind', e.target.value)
                this.kind = e.target.value
                this.hideTitle(this.kind)
            },
            // 隐藏题目
            hideTitle(kind) {
              if (kind === 'FILL') {
                this.showTitleEditor = false
                this.showTitleFill = true
              } else {
                this.showTitleEditor = true
                this.showTitleFill = false
              }

              console.log('hideTitle', kind, this.showTitleEditor, this.showTitleFill)
            },
            // 填空题 - 插入填空位
            addFillOptions() {
                // this.fillOptions.push([''])

                this.fillOptions.push({
                    answers: [''],
                })

                // let title = $('#c-title').val()
                // title += '______'// 6个_
                // $('#c-title').val(title)

                this.title = this.title == undefined ? '' : this.title
                this.title += '______'// 6个_
            },
            // 填空题 - 填空位添加答案
            addFillAnswer(index) {
                // this.fillOptions[index].push('')
                this.fillOptions[index].answers.push('')
            },
            // 填空题 - 填空位删除答案
            deleteFillAnswer(index, key) {
                // if (this.fillOptions[index].length === 1) {
                //     this.fillOptions.splice(index, 1)
                // } else {
                //     this.fillOptions[index].splice(key, 1)
                // }

                if (this.fillOptions[index].answers.length === 1) {
                    this.fillOptions.splice(index, 1)
                } else {
                    this.fillOptions[index].answers.splice(key, 1)
                }
            },
            // 修改题目
            changeTitle(e) {
                console.log('changeTitle e', e, this.title)
            },

            // 验证
            valid() {
                console.log('trigger valid', this.kind)
                switch (this.kind) {
                    case 'FILL':
                        console.log('this.fillOptions', this.fillOptions)
                        for (let i = 0; i < this.fillOptions.length; i++) {
                            let option = this.fillOptions[i]
                            for (let j = 0; j < option.answers.length; j++) {
                                let answer = option.answers[j]
                                console.log('answer', answer)
                                if (answer.length == 0) {
                                    Fast.api.msg('填空位（' + (i + 1) + '）的第' + (j + 1) + '个答案不能为空')
                                    console.log('填空位（' + (i + 1) + '）的第' + (j + 1) + '个答案不能为空')
                                    valid_result = false
                                    return false
                                }
                            }
                        }

                        // $('#options_extend').val(encodeURI(JSON.stringify(this.fillOptions)))
                        valid_result = true
                        return true
                    default:
                        valid_result = true
                        return true

                }
            }
        }
    })
</script>
